<template>
	<view>
		<view class="search-box">
			<u-search shape="square" height="88"
				bg-color="#F7F8FA"
				placeholder="请输入工号/电话/姓名/邮箱"
				placeholder-color="#CCCCCC"
				search-icon-color="#999999"
				:action-style="{fontSize: '30rpx', fontWeight: 'bold', color: '#0071C5'}"
				:input-style="{fontSize: '28rpx'}"
				:disabled="true"
				@click="toSearch">
			</u-search>
		</view>
		<view class="org-list-box">
			<view class="org-item" v-for="(item, i) in orglist" :key="i" @click="toSelectUser(item)">
				<view class="org-icon">
					<u-image width="38rpx" height="38rpx" src="/static/icons/org-icon.png"></u-image>
				</view>
				<view class="org-title">
					{{item.fullName}}
				</view>
				<view class="org-arrow">
					<u-icon name="arrow-right" size="24" color="#B3B3B3"></u-icon>
				</view>
			</view>
			<view class="org-item" @click=toSelectUser({})>
				<view class="org-icon">
					<u-image width="38rpx" height="38rpx" src="/static/icons/current-org-icon.png"></u-image>
				</view>
				<view class="org-title">
					{{$store.state.vuex_user.userInfo.departmentName}}
				</view>
				<view class="org-arrow">
					<u-icon name="arrow-right" size="24" color="#B3B3B3"></u-icon>
				</view>
			</view>
			<view class="org-item" @click="toCollect">
				<view class="org-icon">
					<u-image width="38rpx" height="38rpx" src="/static/icons/top-contacts-icon.png"></u-image>
				</view>
				<view class="org-title">
					我的常用联系人
				</view>
				<view class="org-arrow">
					<u-icon name="arrow-right" size="24" color="#B3B3B3"></u-icon>
				</view>
			</view>
		</view>
		<view class="top-contacts-title">
			常用联系人
		</view>
		<view class="u-p-l-30 u-p-r-30">
			<au-contact-cell v-for="(item, i) in recentList" :key="i" :contact-info="item" fullNameAttr="name" @click="toUserInfo"></au-contact-cell>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orglist: [],
				recentList: []
			}
		},
		methods: {
			toSelectUser(pOrg) {
				let {id, fullName} = pOrg
				const isUser = true
				if (id) {
					this.$u.route('pages/contacts/select-user', {id, fullName})
				} else {
					id = this.$store.state.vuex_user.userInfo.departmentId
					fullName = this.$store.state.vuex_user.userInfo.departmentName
					this.$u.route('pages/contacts/select-user', {id, fullName, isUser})
				}
			},
			toSearch() {
				this.$u.route('pages/contacts/search-user')
			},
			toCollect() {
				this.$u.route('pages/contacts/collect')
			},
			toUserInfo(pUser) {
				this.$u.route('pages/contacts/user-info', {id: pUser.userId})
			}
		},
		onLoad() {
			this.$u.api.findParentOrg({orgId: this.$store.state.vuex_user.userInfo.organizeId}).then(res => {
				// console.log(res)
				this.orglist.push({
					id: res[res.length - 1].id,
					fullName: res[res.length - 1].name
				})
				this.$u.api.recentContact().then(res => {
					this.recentList = res
				})
			}).catch(err => {
				console.log(err)
			})	
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	.org-list-box {
		padding: 30rpx;
		.org-item {
			display: flex;
			line-height: 107rpx;
			.org-icon {
				padding-top: 8rpx;
				width: 64rpx;
			}
			.org-title {
				flex: 1;
				font-size: 32rpx;
				font-weight: bold;
			}
			.org-title, .org-arrow {
				border-bottom: 2rpx solid #E6E7E8;
			}
		}
	}
	.top-contacts-title {
		padding: 15rpx 30rpx;
		font-size: 28rpx;
		color: #999999;
		background-color: #F7F8FA;
	}
</style>
